<template>
  <div>
    <div style="display: flex; justify-content: flex-start">
      <el-input
        placeholder="档案号/姓名/手机号"
        v-model="page.searchObj.name"
        autofocus
        style="width: 230px; margin-right: 30px"
        clearable
        ><i slot="prefix" class="el-input__icon el-icon-search"></i
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="query"
        >搜索</el-button
      >

    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      height="65vh"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="HealthTime" label="体检时间">
      </el-table-column>
      <el-table-column prop="id" label="档案号"> </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="phone" label="手机号码" sortable> 

      </el-table-column>
      <el-table-column prop="pack" label="检测套餐" sortable> </el-table-column>
      <el-table-column prop="state" label="报告状态">
        <template v-slot="z">
            {{ z.row.state | statefilter }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="xz">
        <el-button type="success" v-if="xz.row.state==0" plain @click="sc(xz.row)">上传报告</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5,10 ]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose" >
  <el-form :model="examin">
<el-form-item label="数据文件:" style="display: flex; align-items: center;">
  <el-upload action="/api/hxj/upload" list-type="picture-card" name="file"
 :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
 </el-upload>
 <el-dialog :visible.sync="dialogVisible3">
 <img width="100%" :src="dialogImageUrl" alt="">
 </el-dialog>
 </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sctupbtn">确 定</el-button>
  </span>
</el-dialog>
  </div>
  
</template>

<script>
export default {
    data(){
        return {
          dialogVisible3:false,
          dialogVisible:false,
          examin:{},
          dialogImageUrl:'',
          img:'',
      tableData: [], //表格数据
      total: 0, //总页数
      page: {
        //分页查询条件
        pageNum: 1, //当前页
        pageSize: 5, //页面数量
        searchObj: {
          //条件对象
          name: "", //档案号/姓名/手机号查询
        },
      },
        };
  },
    
    methods: {
      query(){ 
          // console.log(this.page)
            this.axios
        .post("/api/hxj/searchQuerytjsc", this.page)
        .then((result) => {
            // console.log(result.data)
          this.total = result.data.total;
          this.tableData = result.data.list;
        })
        .catch((error) => {
          alert("出错了");
        });
           
        },
        showSave(){

        },
        handleSizeChange(val){
            this.page.pageSize=val
            this.query()
        },
        handleCurrentChange(val){
        this.page.pageNum=val
            this.query()
        },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      sc(val){
        this.dialogVisible=true;
        console.log(val)
        this.examin=val

      },
      delect(){

      },

      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible3 = true;
      },
    handleAvatarSuccess(res, file,fileList) {
    this.img=fileList;
},
sctupbtn(){
  var imgurl=[];
  this.img.forEach(z => {
    imgurl.push(z.response)
  });
  console.log(imgurl)

  this.axios.post("/api/hxj/scokkk",{
    zid:this.examin.zid,
    imgurl:imgurl
  }).then(res=>{
    this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
        this.query()
  })
  this.dialogVisible=false;
  this.query();

}
    },
    filters: {
        statefilter:function(val){
            return val==1 ? "已上传":"未上传";
        }
    },
    created () {
        this.query()
    }
}
</script>

<style>

</style>